<template>
    <div class="listView">
        <listViewTop :playlist="state.playlist"></listViewTop>
        <playList :playlist="state.playlist"></playList>
    </div>
</template>
<script>
import listViewTop from '../components/listView/listViewTop.vue'
import playList from '../components/listView/playList.vue'
import { getPlaylistDetail } from '../api/index'
import { useRoute } from 'vue-router'
export default {
  components: {
    listViewTop, playList
  },
  data () {
    return {
      state: {
        list: [],
        playlist: {
          creator: {},
          tracks: []
        }
      }
    }
  },
  mounted: async function () {
    var route = useRoute()
    var id = route.query.id
    var res = await getPlaylistDetail(id)
    this.state.playlist = res.data.playlist
  //  console.log(this.state.playlist)
  }
}
</script>
